<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>相对定位与绝对定位</title>
	<style>
		/*相对定位：box2图片压到box1图片上*/
	div.box1{
		width: 250px;
		height: 250px;
		background: url(img/1.png);
		background-size: 100%;
		/*声明一个相对定位与方向属性*/
		position: absolute;
		left: 0;
		top: 0;
		/*堆叠z-index  针对所有的position定位*/
		z-index: 100;
	}
	div.box2{
		width: 250px;
		height: 250px;
		background: url(img/2.png);
		background-size: 100%;
		/*声明一个相对定位与方向属性*/
		position: absolute;
		left: 0;
		top: 0;
		z-index: 101;
	}
	</style>
	</head>
	<body>
		<!-- 定位：相对定位 相对与元素定位
		           功能：单一元素定位、元素在正常文档流中、推荐
				   position属性:relative; 声明元素可以用相对定位意义
				       方向属性:left、right、top、bottom
					   Z轴堆叠顺序属性：z-index
					          属性值数值、数值越大、越靠前
				   绝对定位 定位祖先【页面左上角】进行定位
				   功能：脱离文档流，不占据原空间
				   方向属性和叠加属性和相对以及固定定位共用！
				   Position属性：absolute；声明文员可以使用绝对定位
				   
				   实际开发中：相对定位结合绝对定位一起使用
				              侧边栏，左栏、遮罩层【挂靠】
				   案例：左栏弹出【html结构，语义化标签+css两种定位+js】
				   
				   
				   -->
				   <div class="box1"></div>
				   <div class="box2"></div>
	</body>
</html>